import React from 'react'
import {
    DatabaseOutlined,
    RedoOutlined,
    CloseCircleOutlined,
    CheckCircleOutlined,
    ExclamationCircleOutlined,
    InfoCircleOutlined,
} from '@ant-design/icons'
import type { NsGraph } from '@antv/xflow'
import { NsGraphStatusCommand } from '@antv/xflow'
import './algo-node.less'

const fontStyle = { fontSize: '16px', color: '#3057e3' }
interface IProps {
    status: NsGraphStatusCommand.StatusEnum
    hide: boolean
}
export const AlgoIcon: React.FC<IProps> = props => {
    if (props.hide) {
        return null
    }
    switch (props.status) {
        case NsGraphStatusCommand.StatusEnum.PROCESSING:
            return <RedoOutlined spin style={{ color: '#c1cdf7', fontSize: '16px' }} />
        case NsGraphStatusCommand.StatusEnum.ERROR:
            return <CloseCircleOutlined style={{ color: '#ff4d4f', fontSize: '16px' }} />
        case NsGraphStatusCommand.StatusEnum.SUCCESS:
            return <CheckCircleOutlined style={{ color: '#39ca74cc', fontSize: '16px' }} />
        case NsGraphStatusCommand.StatusEnum.WARNING:
            return <ExclamationCircleOutlined style={{ color: '#faad14', fontSize: '16px' }} />
        case NsGraphStatusCommand.StatusEnum.DEFAULT:
            return <InfoCircleOutlined style={{ color: '#d9d9d9', fontSize: '16px' }} />
        default:
            return null
    }
}

export const AlgoNode: NsGraph.INodeRender = props => {
    return (
        <div className={`xflow-algo-node ${props.isNodeTreePanel ? 'panel-node' : ''}`}>
            <span className="icon">
                <DatabaseOutlined style={fontStyle} />
            </span>
            <span className="label">{props.data.label}</span>
            <span className="status">
                <AlgoIcon status={props.data && props.data.status} hide={props.isNodeTreePanel} />
            </span>
        </div>
    )
}